// 2、在模拟 Vue.js 响应式源码的基础上实现 v - html 指令，以及 v - on 指令。
// v - html 指令
// 原理：v - html 实现和 v - text 基本一样，不同在于 v - html 把变量赋值到 innerHTML
// compiler.js 核心代码
htmlUpdater(node, value, key) {
  console.log(node, value, key)
  node.innerHTML = value
  new Watcher(this.vm, key, (newValue) => {
    node.innerHTML = newValue
  })
}

// v - on 指令
// 在 vue.js 文件中变量 methods，把事件注入到 vue 实例
// 在 compiler.js 文件判断指令处添加'@'的判断，在 update 函数判断attrName是否含有 'on:'，如果有就把后面的事件行为提取拼接为对应的函数名调用
class Vue {
  constructor(options) {
    this.$methods = options.methods || {}
    this._injectionMethods(this.$methods)
  }

  // 代理数据
  // .....

  // 把methods注入vue实例
  _injectionMethods(methods) {
    Object.keys(methods).forEach(fnName => {
      this[fnName] = this.$methods[fnName]
    })
  }
}
class Compiler {

  // 根据指令拼接函数(不需要if语句)，调用对于的指令处理函数
  update(node, key, attrName) {
    if (attrName.startsWith('on:')) {
      attrName = attrName.replace('on:', '')
    }

    let updateFn = this[attrName + 'Updater']
    updateFn && updateFn.call(this, node, this.vm[key], key)
  }

  // v-on
  clickUpdater(node, value, key) {
    node.onclick = value
  }

  // v-html
  htmlUpdater(node, value, key) {
    node.innerHTML = value
    new Watcher(this.vm, key, (newValue) => {
      node.innerHTML = newValue
    })
  }

  // 判断元素属性是否是指令
  isDirective(attrName) {
    return attrName.startsWith('v-') || attrName.startsWith('@')
  }
}
/**
 * < !DOCTYPE html >
  <html lang="en">
    <head>
      <meta charset="UTF-8">
        <title>mini vue</title>
  </head>
      <body>
        <div id="app">
          <h1>v-html</h1>
          <div v-html="html"></div>
          <h1>v-on</h1>
          <div @</div>
        <div v-on:mouseover="mouseOver">鼠标进入触发</div>
    </div>

      <script src="./js/dep.js"></script>
      <script src="./js/watcher.js"></script>
      <script src="./js/compiler.js"></script>
      <script src="./js/observer.js"></script>
      <script src="./js/vue.js"></script>
      <script>
        let vm = new Vue({
          el: '#app',
      data: {
          html: '<p style="color: skyblue">这是一个p标签</p>',
      },
      methods: {
          clickHandler() {
          console.log('点击事件')
          alert('点击了')
        },
        mouseOver(){
          alert('鼠标进入')
          console.log('mouseOver')
        }
      }
    })
    </script>
  </body>
  </html>
 */